<template lang="pug">
data-page(
  v-bind="pageParams"
)
  mt-table(
    v-bind="tableProps"
  )
membersAssociation(v-model="modelValue" :selectEquipment="props.selectEquipment" @message-to-parent="request('tableData');")  
</template>

<script setup lang="ts">
import {
  type FormItemProps,
  type IAction,
  type DataPageProps,
  type Action,
  type TableProps,
  useNotify,
} from "@scmt/common-components";
import { type QueryPagination, useApi } from "@scmt/core-api";
import type { UserQueryParams } from "@scmt/api-user";
import { type InspectGroupEntity } from "@scmt/api-lis-inspect-group";
import membersAssociation from "./membersAssociation.vue";
import { useRequest } from "@scmt/common-hooks";

const $api = useApi();
const $notify = useNotify();
const modelValue = ref<Boolean>(false);
const queryPramas = reactive<UserQueryParams>({
  pageNum: 1,
  pageSize: 20,
});

//添加 Props属性
const props = defineProps({
  selectEquipment: {
    type: Object as PropType<InspectGroupEntity>,
    default: () => {},
  },
});

const { request, data, loadingMap } = useRequest({
  tableData: (q: any) => {
    let params = Object.assign(
      { groupId: props.selectEquipment?.value?.id },
      queryPramas,
      q
    );
    if (!props.selectEquipment || !props.selectEquipment.id) {
      $notify.warning("请先选择检验小组字典");
      //没有选择请先选择检验小组字典的话 deviceId传一个不会有的值
      params = Object.assign({ groupId: "testtt" }, queryPramas, q);
    } else {
      params = Object.assign(
        {
          groupId: props.selectEquipment?.id,
        },
        queryPramas,
        q
      );
    }
    return $api.user.getRelatedGroupListByPage(params);
  },
  cancelRelatedUserGroup: (params: any) => {
    return $api.lis.userGroup.cancelRelatedUserGroup(params).then(() => {
      $notify.success("取消关联成功");
      request("tableData");
    });
  },
});

const pageParams = computed<DataPageProps>(() => {
  const queryFields: FormItemProps[] = [
    {
      prop: "name",
      label: "项目名称",
    },
  ];

  const headerActions: Action[] = [
    { event: "relation", label: "批量关联", type: "primary" },
  ];

  const dataPageProps: DataPageProps = {
    loading: loadingMap.tableData,
    queryModel: queryPramas,
    queryFields,
    actions: headerActions,
    onQuery: () => request("tableData"),
    onAct: onPageActions,
    columns: 4,
  };

  return dataPageProps;
});

const tableProps = computed(() => {
  const { tableData } = toRefs(data);

  const tableProps: TableProps = {
    loading: loadingMap.tableData,
    data: tableData.value?.items,
    pagination: tableData.value?.pagination,
    insertIndex: false,
    columns: [
      {
        prop: "jobNumber",
        label: "工号",
      },
      {
        prop: "username",
        label: "姓名",
      },
      {
        prop: "phone",
        label: "手机号",
      },
      {
        label: "操作",
        actions: [{ event: "cancel", label: "取消关联", type: "danger" }],
      },
    ],
    onAct: onPageActions,
    onPaginate: (pagination: QueryPagination) =>
      request("tableData", pagination),
  };
  return tableProps;
});

const onPageActions = (action: IAction, model?: any) => {
  switch (action.event) {
    case "relation":
      if (!props.selectEquipment?.id) {
        $notify.warning("请先选择检验小组字典");
        break;
      }
      modelValue.value = true;
      break;
    case "cancel":
      if (!model) {
        $notify.error("请选择需要取消关联的用户");
        return;
      }
      const projectIdData = [].concat(model).map((item) => {
        return item.id;
      });
      request("cancelRelatedUserGroup", {
        groupId: props.selectEquipment?.id ?? "",
        userIdList: projectIdData,
      });
      break;
  }
};

watch(
  () => props.selectEquipment,
  (item) => {
    if (item && item.id) {
      request("tableData");
    }
  },
  {
    immediate: true,
  }
);
</script>

<style lang="less" scoped></style>
